/**
 * 图表模型
 * 负责 客户来源统计 领用人员分布 价值评估统计 价值评估统计 客户区域统计 
 * 更换图表类型 宽度 高度 
 * */

import React, { useState, useEffect } from 'react'
import { Button, ConfigProvider, Form, DatePicker, Select, Card } from 'antd';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import dayjs from 'dayjs'
import './GraphModel.less' // 图表模型样式
import ReactEcharts from 'echarts-for-react'; //导入echarts
import { useLocation} from 'umi';

export default function GraphModel(props) {

    // 接收路由参数
    const location = useLocation();
    console.log(location,'接收路由参数');

    // 控制图表或表格的数据
    const [TableEcharts, setTableEcharts] = useState([
        {
            id: '1',
            name: '数据报表',
            state: false,
        },
        {
            id: '2',
            name: '图形报表',
            state: true,
        }
    ])
    // 判断图表表格的开关
    const [isTable,setIsTable] = useState(false)
    // 查询栏 表单
    const [form] = Form.useForm();
    // 客户行业数据
    const [lineData, setLineData] = useState([
        {
            value: '全部1',
            label: '全部',
        },
        {
            value: '零售',
            label: '零售',
        },
        {
            value: '制造',
            label: '制造',
        },
        {
            value: '工程',
            label: '工程',
        },
    ])
    // 客户分类数据
    const [cateData, setCateData] = useState([
        {
            value: '全部2',
            label: '全部',
        },
        {
            value: '汽车行业',
            label: '汽车行业',
        },
        {
            value: '汽车制造商',
            label: '汽车制造商',
        },
    ])
    // 价值评估数据
    const [assessData, setAssessData] = useState([
        {
            value: '全部3',
            label: '全部',
        },
        {
            value: '很高',
            label: '很高',
        },
        {
            value: '较高',
            label: '较高',
        },
        {
            value: '一般',
            label: '一般',
        },
        {
            value: '较低',
            label: '较低',
        },
        {
            value: '很低',
            label: '很低',
        },
    ])
    // 控制选择框图标
    const [ischeck, setIscheck] = useState(false)
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 开始时间
    const onChange0 = (date, dateString) => {
        console.log(date, dateString);
    };
    // 结束时间
    const onChange1 = (date, dateString) => {
        console.log(date, dateString);
    };
    // 图表类型 柱状 折线 环形 漏斗
    const [ChartsType, setChartsType] = useState('pie')
    const handleChange0 = (value) => {
        console.log(`selected ${value}`);
        setChartsType(value);
    };
    // 图表宽度 
    const [WidthType, setWidthType] = useState('500')
    const handleChange1 = (value) => {
        console.log(`selected ${value}`);
        setWidthType(value)
    };
    // 图表高度 
    const [HeightType, setHeightType] = useState('500')
    const handleChange2 = (value) => {
        console.log(`selected ${value}`);
        setHeightType(value)
    };
    // 点击更换数据 表格 或 图表 选中后样式
    const onChangeTableEcharts = (obj) => {
        let arr = TableEcharts.map(el => {
            if (el.name === obj.name) {
                el.state = true
            } else if (el.name !== obj.name) {
                el.state = false
            }
            return el
        })
        // console.log(arr);
        setTableEcharts(arr)
    }
    // 判断是否选中
    const onSelectTableEcharts = (obj)=>{
      if(obj.name == '数据报表'){
        setIsTable(true)
      }else{
        setIsTable(false)
      }
    }
    // 更换 统计图类型 宽度 高度 
    function getOption(ChartsType) {
        switch (ChartsType) {
            case "pie": //饼状图
                option = {
                    title: {
                        show: ChartsType === 'pie' ? false : true,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '客户数量 <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        show: ChartsType === 'pie' ? true : false,
                        orient: 'vertical',
                        left: 'left',
                        top: '2%',
                        position: 'absolute'
                    },
                    xAxis: {
                        show: ChartsType === 'pie' ? false : true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                    },
                    yAxis: {
                        show: ChartsType === 'pie' ? false : true,// 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                    },
                    series: [
                        {
                            name: '客源统计',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            itemStyle: {
                                borderRadius: 10,
                                borderWidth: 2
                            },
                            // 此处为数据
                            data: [
                                { value: 40, name: '现有客户' },
                                { value: 33, name: '当地资讯' },
                                { value: 0, name: '网络平台' },
                                { value: 35, name: '展会' },
                                { value: 0, name: '外出拜访' },
                                { value: 5, name: '供应商' },
                                { value: 52, name: '市场挖掘' },
                                { value: 0, name: '推广' },
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option
            case "line":// 折线图
            case "bar": // 柱状图
                var data = [
                    { value: 40, name: '现有客户' },
                    { value: 33, name: '当地资讯' },
                    { value: 0, name: '网络平台' },
                    { value: 35, name: '展会' },
                    { value: 0, name: '外出拜访' },
                    { value: 5, name: '供应商' },
                    { value: 52, name: '市场挖掘' },
                    { value: 0, name: '推广' },
                ]
                var xAxisData = []
                var yAxisData = []
                data.map(el => {
                    xAxisData.push(el.name)
                    yAxisData.push(el.value)
                })
                var option = {
                    title: {
                        show: ChartsType !== 'pie' ? true : false,
                        text: "客户数量",
                        textStyle: {
                            fontSize: 15,
                        },
                        top: 5,
                        left: 0,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (obj) {
                            let div = `
                                <div>
                                    客户数量
                                    <div style="display:flex;justify-content: center;align-items: center;">
                                        <div style="margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${obj[0].color}">
                                        </div>
                                        ${obj[0].axisValueLabel} ${obj[0].value}
                                    </div>
                                </div>
                            `
                            return div
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        show: ChartsType !== 'pie' || ChartsType !== 'funnel' ? false : true,
                    },
                    xAxis: [
                        {
                            show: ChartsType !== 'pie' || ChartsType !== 'funnel' ? true : false,
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                textStyle: {
                                    fontSize: 13,
                                    color: "#000"
                                },
                                formatter: function (value) {
                                    return value
                                }
                            },
                            axisTick: {
                                // alignWithLabel: true
                            },
                            axisLine: {					//---坐标轴 轴线
                                show: true,					//---是否显示
                                lineStyle: {
                                    color: '#000',
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                        }
                    ],
                    yAxis: [
                        {
                            show: ChartsType !== 'pie' || ChartsType !== 'funnel' ? true : false,
                            type: 'value',
                            axisLine: {					//---坐标轴 轴线
                                show: true,					//---是否显示
                                lineStyle: {
                                    color: '#000',
                                    width: 1,
                                    type: 'solid',
                                },
                            },
                        }
                    ],
                    //图表滑动、缩放功能
                    dataZoom: [
                        {
                            show: false,
                            start: 0,
                            end: 100  //百分比
                        },
                        {
                            type: 'inside',
                            start: 100,
                            end: 100
                        },
                        {
                            show: true,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 20,
                            height: '100%',
                            showDataShadow: false,
                            left: '100%'
                        }
                    ],
                    series: [
                        {
                            name: 'Direct',
                            type: ChartsType,
                            barWidth: '60%',
                            barMaxWidth: '80%',
                            barMinWidth: '30%',
                            data: yAxisData,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        let colorList = [
                                            '#26C0C0', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#C1232B',
                                            '#c0392b', '#7f8c8d', '#f39c12', '#16a085', '#8e44ad',
                                            '#ecf0f1', '#d35400', '#27ae60', '#95a5a6', '#2980b9',
                                            '#e74c3c', '#3498db', '#9b59b6', '#1abc9c', '#f1c40f',
                                            '#34495e', '#e67e22', '#2ecc71', '#bdc3c7', '#2c3e50'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                },
                            },
                            // 线条颜色
                            lineStyle: {
                                color: "rgba(203, 24, 24, 1)"
                            }
                        }
                    ]
                }
                return option
            case 'funnel':
                var option = {
                    title: {
                        show: false
                    },
                    toolbox: {
                        show: false
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        backgroundColor: "#ffffff",
                        formatter: "客户数量 <br/>{b} : {c} ({d}%)"
                    },
                    xAxis: {
                        show: ChartsType === 'funnel' ? false : true, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                    },
                    yAxis: {
                        show: ChartsType === 'funnel' ? false : true,// 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
                    },
                    legend: {
                        show: ChartsType === 'funnel' ? false : true,
                    },
                    series: [
                        {
                            name: 'Funnel',
                            type: 'funnel',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                formatter: '{b}{d}%',
                                position: 'inside'
                            },
                            width: '80%',
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 12
                                }
                            },
                            data: [
                                { value: 40, name: '现有客户' },
                                { value: 33, name: '当地资讯' },
                                { value: 0, name: '网络平台' },
                                { value: 35, name: '展会' },
                                { value: 0, name: '外出拜访' },
                                { value: 5, name: '供应商' },
                                { value: 52, name: '市场挖掘' },
                                { value: 0, name: '推广' },
                            ]
                        }
                    ]
                };
                return option
        }

    };
    return (
        <>
            <ConfigProvider
                autoInsertSpaceInButton={false}
            >
                {/* 图表模型头部 */}
                <div className='EchartsModelHead'>
                    {/* 头部左侧 */}
                    <div className='HeadLeft'>
                        <Button type="primary" size='small'>过滤</Button>
                        <Button type="primary" size='small'>还原</Button>
                        <Button type="primary" size='small'>打印</Button>
                        <Button type="primary" size='small'>查看日志</Button>
                        <Button type="primary" size='small'>导出</Button>
                    </div>
                    {/* 头部右侧 */}
                    <div className='HeadRight'>
                        <div className='StatementBtn'>
                            {
                                TableEcharts.map((el) => {
                                    return (
                                        <a key={el.id} className={el.state ? 'statement_active' : ''} onClick={() => {
                                            onChangeTableEcharts(el)
                                            onSelectTableEcharts(el)
                                        }}>{el.name}</a>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {/* 图表模型主体 */}
                <div className='EchartsModelMain'>
                    {/* 主题查询 */}
                    <div className='MainSearch'>
                        <Form
                            layout='inline'
                            form={form}
                            onFinish={onFinish}
                            initialValues={{
                                line:'全部',
                                cate:'全部',
                                assess:'全部',
                            }}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item label="客户行业" name="line" style={{ width: '12%' }} >
                                <Select options={lineData} 
                                suffixIcon={<CaretDownOutlined />}
                                >
                                </Select>
                            </Form.Item>
                            <Form.Item label="客户分类" name="cate" style={{ width: '12%' }} >
                                <Select options={cateData} suffixIcon={ischeck ? <CaretUpOutlined /> : <CaretDownOutlined />}>
                                </Select>
                            </Form.Item>
                            <Form.Item label="价值评估" name="assess" style={{ width: '12%' }}>
                                <Select  options={assessData} suffixIcon={ischeck ? <CaretUpOutlined /> : <CaretDownOutlined />}>
                                </Select>
                            </Form.Item>
                            <Form.Item label="添加时间" style={{ width: '35%', display: 'flex' }}>
                                <DatePicker onChange={onChange0} placeholder='' defaultValue={dayjs()} />  -  <DatePicker onChange={onChange1} placeholder='' />
                            </Form.Item>
                            <Form.Item style={{ width: '5%' }}>
                                <Button type="primary" htmlType='submit'>查询</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    {/* 主题标题 */}
                    <div className='MainTitle'>
                        <h2>客户来源统计</h2>
                    </div>
                    {/* 主题卡片 */}
                    <div className='MainCard'>
                        {/* 两种状态 第一图表 第二表格 */}
                        {/* 图表报表部分  */}
                        <Card style={{display: isTable?'none':'flex'}}>
                            {/* 卡片头部 */}
                            <div className='CardSelectHead'>
                                {/* 图表类型 */}
                                <div className='Select_01'>
                                    <div className='SelectTitle'>
                                        图表类型:
                                    </div>
                                    <Select
                                        defaultValue="pie"
                                        style={{ width: 120, }}
                                        onChange={handleChange0}
                                        // 图表类型
                                        options={[
                                            {
                                                value: 'pie',
                                                label: '饼状图',
                                            },
                                            {
                                                value: 'bar',
                                                label: '柱状图',
                                            },
                                            {
                                                value: 'line',
                                                label: '折线图',
                                            },
                                            {
                                                value: 'funnel',
                                                label: '漏斗图',
                                            },
                                        ]}
                                    />
                                </div>
                                {/* 图表宽度 */}
                                <div className='Select_01'>
                                    <div className='SelectTitle'>
                                        图表宽度:
                                    </div>
                                    <Select
                                        defaultValue="500"
                                        style={{ width: 120, }}
                                        onChange={handleChange1}
                                        // 图表宽度
                                        options={[
                                            {
                                                value: '500',
                                                label: '500',
                                            },
                                            {
                                                value: '600',
                                                label: '600',
                                            },
                                            {
                                                value: '700',
                                                label: '700',
                                            },
                                            {
                                                value: '800',
                                                label: '800',
                                            },
                                        ]}
                                    />
                                </div>
                                {/* 图表高度 */}
                                <div className='Select_01'>
                                    <div className='SelectTitle'>
                                        图表高度:
                                    </div>
                                    <Select
                                        defaultValue="500"
                                        style={{ width: 120, }}
                                        onChange={handleChange2}
                                        // 图表高度
                                        options={[
                                            {
                                                value: '500',
                                                label: '500',
                                            },
                                            {
                                                value: '600',
                                                label: '600',
                                            },
                                            {
                                                value: '700',
                                                label: '700',
                                            },
                                            {
                                                value: '800',
                                                label: '800',
                                            },
                                        ]}
                                    />
                                </div>
                            </div>
                            {/* 卡片 图表部分 */}
                            <div className='CardEcharts'>
                                {/* <EchartsModel ChartsType={ChartsType} WidthType={WidthType} HeightType={HeightType}/> */}
                                <ReactEcharts option={getOption(ChartsType)} style={{
                                    width: WidthType !== 'undefinded' ? WidthType + 'px' : '100%',
                                    height: HeightType !== 'undefinded' ? HeightType + 'px' : '100%',
                                    
                                }} />
                            </div>
                        </Card>
                        {/* 数据报表部分 */}
                        <Card style={{display: isTable?'flex':'none'}}>
                                <h2>表格内容</h2>
                        </Card>
                    </div>
                </div>
            </ConfigProvider>
        </>
    )
}
